<template>
	<!-- 个人返水明细 -->
	<div
		v-loading="memberBounsLoading"
		element-loading-spinner="el-icon-loading"
	>
		<p class="name">
			{{ $t('代理发放返水明细') }}
		</p>
		<div class="block-content">
			<BounsDetailTable
				:tableData="memberBouns.proxyTexas"
				:isTexas="true"
			/>
			<BounsDetailTable :tableData="memberBouns.proxyList" />
		</div>
		<p class="name">
			{{ $t('平台发放返水明细') }}
		</p>
		<div class="block-content">
			<BounsDetailTable
				:tableData="memberBouns.platformTexas"
				:isTexas="true"
				:isPlatform="true"
			/>
			<BounsDetailTable
				:tableData="memberBouns.platformList"
				:isPlatform="true"
			/>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import BounsDetailTable from './components/BounsDetailTable'
export default {
  components: { BounsDetailTable },
  mixins: [list],
  props: {
    detailData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      memberBounsLoading: false,
      memberBouns: {
        proxyList: [],
        proxyTexas: [],
        platformList: [],
        platformTexas: []
      }
    }
  },
  computed: {},
  watch: {
    // detailData: {
    // 	handler(val) {
    // 		if (val.memberId) {
    // 			this.getMemberBounsList()
    // 		}
    // 	},
    // 	immediate: true
    // }
  },
  created() {
    if (this.detailData?.memberId) {
      this.getMemberBounsList()
    }
  },
  methods: {
    // 获取个人返水明细
    async getMemberBounsList() {
      this.memberBounsLoading = true
      const params = {
        id: this.detailData?.memberId,
        reportDate: dayjs(String(this.detailData?.reportDate)).format(
          'YYYYMMDD'
        )
      }
      this.memberBouns = {
        proxyList: [],
        proxyTexas: [],
        platformList: [],
        platformTexas: []
      }
      await this.$api
        .getMemberRebateTeamRebateV2(params)
        .then((res) => {
          this.memberBounsLoading = false
          if (res.code === 200 && Array.isArray(res.data)) {
            // 代理发放返水
            this.memberBouns.proxyList = res.data.filter(
              (item) => parseInt(item.platformFlag) === 0
            )
            this.memberBouns.proxyTexas = [
              this.memberBouns.proxyList.shift() || {}
            ]

            // 平台发放返水
            this.memberBouns.platformList = res.data.filter(
              (item) => parseInt(item.platformFlag) === 1
            )
            this.memberBouns.platformTexas = [
              this.memberBouns.platformList.shift() || {}
            ]
          }
        })
        .catch(() => {
          this.memberBounsLoading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.name {
	font-weight: 600;
	font-size: 20px;
}
.block-content {
	position: relative;
	width: 100%;
	margin-top: 10px;
	word-break: break-all;
}
</style>
